import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col,
    Form, Checkbox, Switch, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Typography, Space
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
const { Text } = Typography;
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values)
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const columns = [
            {
                title: '项目',
                dataIndex: 'POLine',
                key: 'POLine',
            },
            {
                title: '未结',
                dataIndex: 'OpenLine',
                key: 'OpenLine',
            },
            {
                title: '物料编码',
                dataIndex: 'PartNum',
                key: 'PartNum',
            },
            {
                title: '描述',
                dataIndex: 'PartDescription',
                key: 'PartDescription',
            },
            {
                title: '单价',
                dataIndex: 'DocUnitPrice',
                key: 'DocUnitPrice',
            },
        ];
        const columnRel = [
            {
                title: '项目',
                dataIndex: 'PORelNum',
                key: 'PORelNum',
            },
            {
                title: '采购类型',
                dataIndex: 'TranType',
                key: 'TranType',
            },
            {
                title: '采购数量',
                dataIndex: 'XRelQty',
                key: 'XRelQty',
            },
            {
                title: '未结',
                dataIndex: 'OpenLine',
                key: 'OpenLine',
            },
            {
                title: '到期日',
                dataIndex: 'DueDate',
                key: 'DueDate',
            },
            {
                title: '承诺日期',
                dataIndex: 'PromiseDt',
                key: 'PromiseDt',
            },
            {
                title: '工单号',
                dataIndex: 'JobNum',
                key: 'JobNum',
            },
            {
                title: '销售订单',
                dataIndex: 'OrderNum',
                key: 'OrderNum',
            },

        ];
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Space>
                        <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="link" icon={<ImportOutlined />}>导入</Button>
                        <Button type="link" icon={<PrinterOutlined />}>打印预览</Button>
                    </Space>
                    <Row gutter={[16, 16]}>
                        <Col span={10}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="汇总" key="1">
                                        <Form.Item label="PO号" style={{ marginBottom: 0 }}>
                                            <Form.Item
                                                name={['POHeader', 'PONum']}
                                                rules={[{ required: true, message: "请输入采购编号" }]}
                                                style={{ display: 'inline-block', width: 160 }}>
                                                <Input style={{ width: 120 }} />
                                            </Form.Item>
                                            <Form.Item
                                                name={['POHeader', 'Approve']}
                                                valuePropName="checked"
                                                style={{ display: 'inline-block', width: 120 }}>
                                                <Checkbox>已核准</Checkbox>
                                            </Form.Item>
                                        </Form.Item>
                                        <Form.Item name={['POHeader', 'VendorID']} label="供应商">
                                            <Select
                                                style={{ width: 200 }}
                                                showSearch
                                                placeholder="请选择供应商"
                                                filterOption={(input, option) =>
                                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item
                                            name={['POHeader', 'OrderDate']}
                                            label="订单日期"
                                            rules={[{ required: true, message: "请选择订单日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item name={['POHeader', 'BuyerId']} label="采购员">
                                            <Select
                                                style={{ width: 200 }}
                                                showSearch
                                                placeholder="请选择采购员"
                                                filterOption={(input, option) =>
                                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item name={['POHeader', 'PayTypeCode']} label="付款方式">
                                            <Select
                                                style={{ width: 200 }}
                                                placeholder="请选择付款方式">
                                            </Select>
                                        </Form.Item>
                                        <Form.Item name={['POHeader', 'CurrencyCode']} label="货币">
                                            <Select
                                                style={{ width: 200 }}
                                                placeholder="请选择货币">
                                            </Select>
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="分录" key="2">
                                        <Form.Item label="物料编码">
                                            <Input.Group compact>
                                                <Form.Item
                                                    noStyle
                                                    name={['PODetail', 'PartNum']}
                                                    rules={[{ required: true, message: "请输入物料编码" }]}>
                                                    <Input style={{ width: 200 }} />
                                                </Form.Item>
                                                <Form.Item noStyle>
                                                    <Select placeholder="版本" style={{ width: 90 }}></Select>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item
                                            name={['PODetail', 'PartDescription']}
                                            label="物料描述">
                                            <Input.TextArea readOnly disabled />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PODetail', 'UnitPrice']}
                                            label="单价"
                                            rules={[{ required: true, message: "请输入单价" }]}>
                                            <Input prefix="￥" suffix="RMB" style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PODetail', 'TaxUnitPrice']}
                                            label="含税价"
                                            rules={[{ required: true, message: "请输入含税价" }]}>
                                            <Input prefix="￥" suffix="RMB" style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item wrapperCol={{ offset: 5 }}>
                                            <Form.Item
                                                name={['PODetail', 'Taxable']}
                                                valuePropName="checked"
                                                style={{ display: "inline-block", width: 120 }}>
                                                <Checkbox>可征税</Checkbox>
                                            </Form.Item>
                                            <Form.Item
                                                name={['PODetail', 'RcvInspectionReq']}
                                                valuePropName="checked"
                                                style={{ display: "inline-block", width: 150 }}>
                                                <Checkbox>需要检验</Checkbox>
                                            </Form.Item>
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="收货" key="3">
                                        <Form.Item
                                            name={['PORel', 'PromiseDate']}
                                            label="承诺日期"
                                            rules={[{ required: true, message: "请选择承诺日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PORel', 'DueDate']}
                                            label="到日期"
                                            rules={[{ required: true, message: "请选择到日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item
                                            name={['PORel', 'TranType']}
                                            label="采购类型"
                                            rules={[{ required: true, message: "请选择采购类型" }]}>
                                            <Radio.Group name="radiogroup">
                                                <Radio value="PUR-STK">库存采购</Radio>
                                                <Radio value="PUR-MTL">工单采购</Radio>
                                                <Radio value="PUR-SUB">外协加工</Radio>
                                                <Radio value="PUR-UKN">其它采购</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                        <Form.Item label="关联工单">
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['PORel', 'JobNum']}
                                                    noStyle>
                                                    <Select placeholder="请选择工单"> </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'AssemblySeq']}
                                                    noStyle>
                                                    <Select placeholder="半成品"> </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'JobSeq']}
                                                    noStyle>
                                                    <Select placeholder="物料/工序"> </Select>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="销售订单">
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['PORel', 'OrderNum']}
                                                    noStyle>
                                                    <Select placeholder="销售订单号"> </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'OrderLine']}
                                                    noStyle>
                                                    <Select placeholder="销售分录"> </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'OrderRelNum']}
                                                    noStyle>
                                                    <Select placeholder="发货行"> </Select>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="采购数量">
                                            <Input.Group compact>
                                                <Form.Item
                                                    noStyle
                                                    name={['PORel', 'XRelQty']}
                                                    rules={[{ required: true, message: "采购数量必填" }]}>
                                                    <InputNumber min={1} />
                                                </Form.Item>
                                                <Form.Item
                                                    noStyle
                                                    name={['PORel', 'IUM']}
                                                    rules={[{ required: true, message: "单位必填" }]}>
                                                    <Input style={{ width: 50 }} placeholder="IUM" />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="总账科目">
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['PORel', 'GLAccount']}>
                                                    <Input style={{ width: 100 }} />
                                                </Form.Item>
                                                <Form.Item
                                                    name={['PORel', 'GLAccountDesc']}>
                                                    <Input style={{ width: 200 }} placeholder="总账科目描述" />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                        <Col span={14}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="分录项" key="1">
                                        <Table
                                            size="small"
                                            columns={columns}
                                            dataSource={this.state.dataSource}
                                            summary={pageData => {
                                                let totalRepayment = 0;
                                                pageData.forEach(({ DocUnitPrice }) => {
                                                    totalRepayment += DocUnitPrice;
                                                });
                                                return (
                                                    <>
                                                        <Table.Summary.Row>
                                                            <Table.Summary.Cell></Table.Summary.Cell>
                                                            <Table.Summary.Cell></Table.Summary.Cell>
                                                            <Table.Summary.Cell></Table.Summary.Cell>
                                                            <Table.Summary.Cell>合计</Table.Summary.Cell>
                                                            <Table.Summary.Cell>
                                                                <Text type="danger">{totalRepayment}</Text>
                                                            </Table.Summary.Cell>
                                                        </Table.Summary.Row>
                                                    </>
                                                );
                                            }} />
                                        <Button block type="dashed" icon={<PlusOutlined />}>添加分录</Button>
                                    </TabPane>
                                    <TabPane tab="收货行" key="2">
                                        <Table size="small" columns={columnRel} dataSource={this.state.dataSource} />
                                        <Button block type="dashed" icon={<PlusOutlined />}>添加收货行</Button>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                    </Row>
                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;